<template>
  <view class="goods-detail" v-if="goodsDetail">
    <u-swiper
      :list="goodsDetail.pics"
      name="pics_big"
      :height="500"
      img-mode="aspectFit"
      bg-color="#fff"
      @click="previewImg"
    ></u-swiper>
    <view class="goods-info">
      <view class="goods-price">￥{{ goodsDetail.goods_price }}</view>
      <view class="goods-text u-line-2">{{ goodsDetail.goods_name }}</view>
    </view>
    <view class="intro-detail">
      <view class="u-text-center u-font-16 u-p-20">图文详情</view>
      <u-parse :html="goodsDetail.goods_introduce"></u-parse>
    </view>
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <!-- 跳回tabbar时需要设置open-type -->
        <navigator
          open-type="switchTab"
          url="/pages/cart/cart"
          class="item car"
        >
          <u-badge
            class="car-num"
            :count="9"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view
          class="cart btn u-line-1"
          @click="handleCart(goodsDetail.goods_id)"
          >加入购物车</view
        >
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      goodsDetail: null,
      shopCart: uni.getStorageSync("shopCart") || [], //取缓存
    };
  },
  async onLoad(options) {
    const res = await this.$u.get("/goods/detail", { goods_id: options.id });
    console.log(res);
    this.goodsDetail = res.message;
  },
  methods: {
    //预览图片
    previewImg(index) {
      const current = this.goodsDetail.pics[index].pics_big;
      const urls = this.goodsDetail.pics.map((item) => item.pics_big);
      wx.previewImage({
        current,
        urls,
      });
    },
    //添加购物车
    handleCart(id) {
      //查找是否有有统一商品
      const goodsId = this.shopCart.findIndex((item) => item.goods_id === id);
      if (goodsId === -1) {
        const newCart = [
          ...this.shopCart,
          { ...this.goodsDetail, checked: true, num: 1 },
        ];
        this.shopCart = newCart;
      } else {
        this.shopCart[goodsId].num++;
      }
      //存vuex
      this.$store.commit('setShopCart',this.shopCart)
    },
  },
  computed: {
    ...mapState(['shopCartList'])
  },
};
</script>
.<style lang="scss" scoped>
.goods-detail {
  background-color: #f5f5f5;
  padding-bottom: 102rpx;
}
.goods-info {
  padding: 20rpx;
  background-color: #fff;
}
.goods-price {
  color: $themeColor;
  margin-bottom: 10rpx;
}
.intro-detail {
  margin-top: 20rpx;
  background-color: #fff;
}

.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>